import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Link } from 'react-router-dom';
import FootCon from '../../component/footCon/footCon';
import { setRouterName } from '../../store/public/action';
import { Carousel } from 'antd-mobile';
import Mock from 'mockjs';
import axios from 'axios';
import './index.scss';

Mock.mock('/getindexdata/', {
    "banner": [require('../../static/img/index/banner.jpg')],
    "content": [require('../../static/img/index/bg-01.jpg'), require('../../static/img/index/bg-02.jpg'), require('../../static/img/index/bg-03.jpg')]
})

Mock.mock('/getdingzhi/', {
    data: [require('../../static/img/index/index-2-3-1.jpg'), require('../../static/img/index/index-2-3-1.jpg'), require('../../static/img/index/index-2-3-1.jpg'), require('../../static/img/index/index-2-3-1.jpg')]
});

class Index extends Component {

    constructor(props) {
        super(props);
        this.state = {
            data: {
                banner: [],
                content: ['','']
            },
            dingzhi: [],
            imgHeight: 176,
        }
    }

    componentWillMount() {
        const { dispatch } = this.props;
        dispatch(setRouterName(this.props.location.pathname, this.props.history));
    }

    componentDidMount() {
        this.getindexdata();
        this.getdingzhi();
    }

    getindexdata() {
        axios.get('/getindexdata/').then(res => {
            this.setState({
                data: res.data
            })
        })
    }

    getdingzhi() {
        axios.get('/getdingzhi/').then(res => {
            this.setState({
                dingzhi: res.data.data
            })
        })
    }

    onSearch = (e) => {
        this.props.history.push('/search');
    }

    render() {
        return (
            <div>
                <div className="index_top clearfix pr">
                    <img src={require('../../static/img/index/logo.png')} alt="3D全屋定制" />
                    <div className="index_top_input" onClick={this.onSearch.bind(this)}>
                        <input type="text" placeholder="请输入要搜索的商品" />
                        <i className="iconfont">&#xe65c;</i>
                    </div>
                    <Link to="/classification">
                        <i className="iconfont pa index_top_list">&#xe636;</i>
                    </Link>
                </div>
                <Carousel
                    autoplay={false}
                    infinite
                    beforeChange={(from, to) => console.log(`slide from ${from} to ${to}`)}
                    afterChange={index => console.log('slide to', index)}
                >
                    {this.state.data.banner && this.state.data.banner.map(val => (
                        <Link
                            key={val}
                            to="baidu.com"
                            style={{ display: 'inline-block', width: '100%', height: this.state.imgHeight }}
                        >
                            <img
                                src={val}
                                alt=""
                                style={{ width: '100%', verticalAlign: 'top' }}
                                onLoad={() => {
                                    // fire window resize event to change height
                                    window.dispatchEvent(new Event('resize'));
                                    this.setState({ imgHeight: 'auto' });
                                }}
                            />
                        </Link>
                    ))}
                </Carousel>
                <div className="index_list">
                    <Link to="/list" className="index_list_msg">
                        <i className="index_list_icon index_list_icon_1"></i>
                        <span>空间套餐</span>
                    </Link>
                    <Link to="/homelist" className="index_list_msg">
                        <i className="index_list_icon index_list_icon_2"></i>
                        <span>全屋定制</span>
                    </Link>
                    <Link to="/measurement" className="index_list_msg">
                        <i className="index_list_icon index_list_icon_3"></i>
                        <span>免费量尺</span>
                    </Link>
                    <Link to="/stores" className="index_list_msg">
                        <i className="index_list_icon index_list_icon_4"></i>
                        <span>实体门店</span>
                    </Link>
                    <Link to="/brandIntroduction" className="index_list_msg">
                        <i className="index_list_icon index_list_icon_5"></i>
                        <span>品牌实力</span>
                    </Link>
                </div>
                <div className="index_title_bg pr">
                    <Link to="/measurement" className="pa index_title_btn">
                        <img src={require('../../static/img/index/index-btn-1.png')} alt="" />
                    </Link>
                </div>
                <div className="index_recommend">
                    <img className="index_recommend_title" src={require('../../static/img/index/index-recommend.jpg')} alt="" />
                    <ul className="index_recommend_content">
                        <li className="pr">
                            <Link to="/homelist">
                                <img className="pa" src={require('../../static/img/index/index-recommend-bg-1.jpg')} alt="" />
                                <h3>全屋定制</h3>
                                <p>意大利原创设计</p>
                            </Link>
                        </li>
                        <li className="pr">
                            <Link to="/homelist">
                                <img className="pa" src={require('../../static/img/index/index-recommend-bg-1.jpg')} alt="" />
                                <h3>全屋定制</h3>
                                <p>意大利原创设计</p>
                            </Link>
                        </li>
                        <li className="pr">
                            <Link to="/homelist">
                                <img className="pa" src={require('../../static/img/index/index-recommend-bg-1.jpg')} alt="" />
                                <h3>全屋定制</h3>
                                <p>意大利原创设计</p>
                            </Link>
                        </li>
                    </ul>
                </div>
                <div className="index_title_bg_2 pr">
                    <Link to="/measurement" className="pa index_title_bg_2_btn">
                        <img src={require('../../static/img/index/index-btn-2.png')} alt="" />
                    </Link>
                </div>
                <div className="index_content clearfix">
                    <img className="index_content_title" src={require('../../static/img/index/index-2-1.jpg')} alt="" />
                    <div className="index_content_bg pr">
                        <Carousel
                            autoplay={true}
                            infinite
                            beforeChange={(from, to) => console.log(`slide from ${from} to ${to}`)}
                            afterChange={index => console.log('slide to', index)}
                            style={{width: '81%', margin: 'auto'}}
                        >
                            {this.state.data.content && this.state.data.content.map(val => (
                                <Link
                                    key={val}
                                    to="/homelist"
                                    style={{ display: 'inline-block', width: '100%', height: this.state.imgHeight}}
                                >
                                    <img
                                        src={val}
                                        alt=""
                                        style={{ width: '100%', verticalAlign: 'top' }}
                                        onLoad={() => {
                                            // fire window resize event to change height
                                            window.dispatchEvent(new Event('resize'));
                                            this.setState({ imgHeight: 'auto' });
                                        }}
                                    />
                                </Link>
                            ))}
                        </Carousel>
                    </div>
                    <div className="index_content_bg pr">
                        <Carousel
                            autoplay={true}
                            infinite
                            beforeChange={(from, to) => console.log(`slide from ${from} to ${to}`)}
                            afterChange={index => console.log('slide to', index)}
                            style={{ width: '81%', margin: 'auto' }}
                        >
                            {this.state.data.content && this.state.data.content.map(val => (
                                <Link
                                    key={val}
                                    to="/homelist"
                                    style={{ display: 'inline-block', width: '100%', height: this.state.imgHeight }}
                                >
                                    <img
                                        src={val}
                                        alt=""
                                        style={{ width: '100%', verticalAlign: 'top' }}
                                        onLoad={() => {
                                            // fire window resize event to change height
                                            window.dispatchEvent(new Event('resize'));
                                            this.setState({ imgHeight: 'auto' });
                                        }}
                                    />
                                </Link>
                            ))}
                        </Carousel>
                    </div>
                    <div className="index_content_bg pr">
                        <Carousel
                            autoplay={true}
                            infinite
                            beforeChange={(from, to) => console.log(`slide from ${from} to ${to}`)}
                            afterChange={index => console.log('slide to', index)}
                            style={{ width: '81%', margin: 'auto' }}
                        >
                            {this.state.data.content && this.state.data.content.map(val => (
                                <Link
                                    key={val}
                                    to="/homelist"
                                    style={{ display: 'inline-block', width: '100%', height: this.state.imgHeight }}
                                >
                                    <img
                                        src={val}
                                        alt=""
                                        style={{ width: '100%', verticalAlign: 'top' }}
                                        onLoad={() => {
                                            // fire window resize event to change height
                                            window.dispatchEvent(new Event('resize'));
                                            this.setState({ imgHeight: 'auto' });
                                        }}
                                    />
                                </Link>
                            ))}
                        </Carousel>
                    </div>
                    <img className="index_content_title img_two" src={require('../../static/img/index/index-2-2.jpg')} alt="" />
                    <div className="index_content_space">
                        <div className="index_content_space_1">
                            <Link to="/measurement">
                                <img src={require('../../static/img/index/index-2-2-1.jpg')} alt="" />
                            </Link>
                        </div>
                        <div>
                            <Link to="/measurement">
                                <img src={require('../../static/img/index/index-2-2-2.jpg')} alt="" />
                            </Link>
                        </div>
                        <div>
                            <Link to="/measurement">
                                <img src={require('../../static/img/index/index-2-2-3.jpg')} alt="" />
                            </Link>
                        </div>
                        <div>
                            <Link to="/measurement">
                                <img src={require('../../static/img/index/index-2-2-4.jpg')} alt="" />
                            </Link>
                        </div>
                        <div>
                            <Link to="/measurement">
                                <img src={require('../../static/img/index/index-2-2-5.jpg')} alt="" />
                            </Link>
                        </div>
                    </div>
                    <img className="index_content_title" src={require('../../static/img/index/index-2-3.jpg')} alt="" />
                    <div className="index_content_customized">
                        {this.state.dingzhi && this.state.dingzhi.map((item, key) => 
                            <Link to="/homelist" className="index_content_customized_content" key={key}>
                                <img src={item} alt="" />
                            </Link>
                        )}
                    </div>
                    <Link to="/homelist" className="index_btn">
                        点击预览更多
                    </Link>
                </div>
                <FootCon></FootCon>
            </div>
        )
    }

}
export default connect()(Index)